<template>
  <div id="myBar3" :style="{ width: '100%', height: '250px' }"></div>
</template>

<script>
export default {
  name: "pie1",
  props: {
    bar3data: {
      type: Array,
      default: function () {
        return [];
      },
    },
    bar3data1: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    bar3data() {
      this.init();
    },
    bar3data1() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let bar3 = this.$echarts.init(document.getElementById("myBar3"));
      bar3.setOption({
        color:['#9ad4e0', '#4fade0', '#3168c3'],
        legend: {
          data: [
            "低风险",
            "中风险",
            "高风险"
          ],
          // itemStyle: {
          //   color: ['#3168c3', 'red', '#9ad4e0']
          // }
        },
        series: [
          // 内圈
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 12,
            },
            labelLine: {
              show: false,
            },
            data: this.bar3data
          },
          // 外圈
          {
            name: "访问来源",
            type: "pie",
            radius: ["45%", "58%"],
            labelLine: {
              length: 30,
            },
            label: {
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: this.bar3data1,
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>